<template>
    <div class="tableModel">
      <div class="item">
        <div class="itemTit">
            <div @click="dialogTableVisible = true">{{ props.title }}</div>
            <img v-show="!runInterval" @click="runInterval = true" class="img-col-kl" src="@/assets/imgs/button-code.png">
            <img v-show="runInterval" @click="runInterval = false" class="img-col-kl" src="@/assets/imgs/button-code2.png">
        </div>
        <el-row :gutter="14">
          <el-col :span="12">
            <el-carousel direction="vertical" height="213px" :interval="runInterval ? 3000 * (props.columns?.length ?? 3): ''" :autoplay="false">
              <el-carousel-item v-for="(item1, i) in props.data" :key="i">
                <div class="box-gl">
                  <div>
                    <div class="header-br">
                        <div class="tel-ml-bar">{{ i + 1}}</div>
                        <img style="width: 24px;height: 24px;margin-left: 24px;" src="@/assets/imgs/logo-tl.png"/>
                        <div class="col-3">1号厂房</div>
                        <div class="sure-point" v-if="item1['state'] == '运行'"></div>
                        <div class="sure-point error-point" v-else></div>
                        <div class="run-ti" v-if="item1['state'] == '运行'">运行</div>
                        <div class="run-ti run-error" v-else>{{item1['state']}}</div>
                    </div>
                    <div class="body-bar">
                      <el-row :gutter="20">
                        <el-col class="col-pert-vb" v-for="(item2, t) in props.columns" :key="t" v-show="!item2?.hidden" :span="8"><!--Number.isInteger(i / 4) ? 5:6-->
                          <div>{{item2.title}}</div>
                          <div style="margin-left: auto;">{{ item1[item2.key]  }}</div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="12">
            <el-carousel direction="vertical" height="213px" :interval="3000 * (props.columns2?.length ?? 3)" :autoplay="false">
              <el-carousel-item v-for="(item1, i) in props.data2" :key="i">
                <div class="box-gl">
                    <div class="header-br">
                        <div class="tel-ml-bar">{{ i + 1}}</div>
                        <img style="width: 24px;height: 24px;margin-left: 24px;" src="@/assets/imgs/logo-tl.png"/>
                        <div class="col-3">二号厂房</div>
                        <div class="sure-point" v-if="item1['state'] == '运行'"></div>
                        <div class="sure-point error-point" v-else></div>
                        <div class="run-ti" v-if="item1['state'] == '运行'">运行</div>
                        <div class="run-ti run-error" v-else>{{item1['state']}}</div>
                    </div>
                    <div class="body-bar">
                      <el-row :gutter="30">
                        <el-col class="col-pert-vb" v-for="(item2, t) in props.columns2" :key="t" v-show="!item2?.hidden" :span="8"><!--Number.isInteger(i / 4) ? 5:6-->
                          <div>{{item2.title}}</div>
                          <div style="margin-left: auto;">{{ item1[item2.key] }}</div>
                        </el-col>
                      </el-row>
                    </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </div>
      <el-dialog v-model="dialogTableVisible" :title="props.title" width="1600" >
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="一号厂房" name="first">
            <el-table :data="props.data" style="height: 600px;">
              <el-table-column  v-for="(item2, t) in props.columns" :key="t"  :property="item2.key" :label="item2.title"/>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="二号厂房" name="second">
            <el-table :data="props.data2" style="height: 600px;">
              <el-table-column  v-for="(item2, t) in props.columns" :key="t"  :property="item2.key" :label="item2.title" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </template>
  <script setup lang="ts">
  import { onMounted, ref } from "vue";
  
  
  const dialogTableVisible = ref(false)
  /** @api */
  interface Props {
    title: string;
    columns: { title: string; key: string ;hidden?:boolean}[];
    columns2: { title: string; key: string ;hidden?:boolean}[];
    data: { [key: string]: string | number }[];
    data2: { [key: string]: string | number }[];
  }
  // 组件传参
  const props = withDefaults(defineProps<Props>(), {
    title: "厂房",
    columns: () => [],
    columns2: ()=> [],
    data: () => [],
    data2: () => [],
  });
  const activeName = ref('first');
  /** @数据 */
  /** 滚动定时器 */
  
  const gridData = [
    {
      date: '2016-05-02',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-04',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-01',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-03',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
  ]
  
  
  const runInterval = ref(true);
  let scrollTimer1: number | any = 0;
  const scrollRef1 = ref<any>(null);
  /** @生命周期 */
  onMounted(() => {
    console.log(props.data,2222)
    beginScroll();
  });
  /** @方法 */
  const foucus = () => {
    clearInterval(scrollTimer1);
  };
  const blur = () => {
    scrollTimer1 = undefined;
    loopScroll();
  };
  const beginScroll = () => {
    setTimeout(() => {
      loopScroll();
    }, 500);
  };
  const loopScroll = () => {
    scrollTimer1 = setInterval(() => {
      changeScrollTop(scrollRef1.value);
    }, 100);
  };
  const changeScrollTop = (dom: any) => {
    // const dom = scrollRef.value?.wrapRef;
    if (dom) {
      // console.log('dom', dom.scrollHeight, dom.clientHeight)
      /** 小于一行就不滚动 */
      if (dom.scrollHeight - dom.clientHeight < 55) {
        return;
      }
      dom.scrollTop = dom.scrollTop + 2;
      const top = dom.scrollTop;
      const sHeight = dom.scrollHeight;
      const cHeight = dom.clientHeight;
      if (top + cHeight + 50 >= sHeight) {
        dom.scrollTop = 0;
      }
    }
  };
  /** @侦听器 */
  /** @公共方法 */
  </script>
  <style lang="scss" scoped>
  .tableModel {
    //width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;
    padding: 16px 15px;
    background: rgba(34, 34, 34, 0.38);
    border-radius: 8px;
    .itemTit {
        opacity: 1;
        font-family: Source Han Sans;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: 1.44px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #FFFFFF;
        text-align: left;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .img-col-kl{
            width: 38px;
            height: 22px;
        }
        :first-child{
          cursor: pointer;
        }
    }
    .box-gl{
      background: #333333;
      border-radius: 4px;
      padding: 8px;
      height: 197px;
      .header-br{
        display: flex;
        align-items: center;
        padding: 0px 10px;
        justify-content: left;
        .tel-ml-bar{
          background: #FF7300;
          font-size: 16px;
          font-weight: 500;
          line-height: normal;
          padding: 4px 8px 0px;
          border-radius: 2px;
        }
        .col-3{
          margin-left: 24px;
          font-family: Source Han Sans;
          font-size: 18px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          font-variation-settings: "opsz" auto;
          font-feature-settings: "kern" on;
          color: #FFFFFF;
        }
        .sure-point{
          width: 12px;
          height: 12px;
          background-color: #00BE68;
          border-radius: 12px;
          margin-left: auto;
        }
        .run-ti{
          font-family: Source Han Sans;
          font-size: 18px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          font-variation-settings: "opsz" auto;
          font-feature-settings: "kern" on;
          color: #00BE68;
          margin-left: 6px;
        }
        .error-point{
          background-color: #f30000;
        }
        .run-error{
          color: #f30000;
        }
      }
      .body-bar{
        font-size: 16px;
        margin-top: 16px;
        padding-right: 10px;
        .col-pert-vb{
          display: flex;
          align-items: center;
          margin-bottom: 13px;
          line-height: 20px;
          justify-content: left;
        }
      }
    }
    // table样式
    table thead,
    tbody tr,
    tfoot tr,
    thead tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
  
    th {
      font-weight: normal !important;
      padding: 0;
    }
  
    .title {
      // display: flex;
      // justify-content: space-between;
      height: 27px;
      background: rgba(6, 104, 185, 0.44);
    }
  }
</style>  